import React from "react";

// 导入外部定义的 css 样式，这里不是通过模块导入，而是通过 link 导入
import './02-style.css'

class App extends React.Component {

  // 定义组件中的初始状态 ------------------- vue 中的 data 是一样的定义
  state = {
    flag: true,
    count: 100
  }

  render(){
    return (<>
      <h1 className={this.state.flag ? 'success' : 'error'} onClick={()=>{

        // 无法直接修改值，如果直接修改的话这个数据是不具备响应式的
        // this.state.flag = !this.state.flag
        // console.log('被点击了',this.state.flag);


        // react 中是有专门的修改方法的
        // setState 是 react 类组件中唯一修改数据的方法
        this.setState({
          flag: !this.state.flag
        })

      }}> 当你停下来休息时，不要忘记别人还在奔跑，所有请绊倒他。 </h1>
    </>)
  }
}

export default App
